$(function () {
	const laypage = layui.laypage

	const q = {
		type: 2,
		page: 1,
		limit: 10,
	}
	// 获取点赞信息
	getZan()
	function getZan() {
		$.ajax({
			url: '/user/userDataList',
			method: 'GET',
			headers: { token: localStorage.getItem('token') },
			data: q,
			success: function (res) {
				console.log(res)

				const {
					data: { list },
				} = res

				console.log(list)

				const { count, data } = list

				const htmlTpl = data.map(function (item) {
					const { id, title, pic, lovenum } = item
    
					return `
          <li>
            <a  href="javascript:;">
              <span class="thumbnail">
                <img class="thumb" src="http://124.223.14.236:8060/${pic}" />
              </span>
              <span class="text">${title}</span>
              <span class="text-muted post-views">已点赞(${lovenum ? lovenum : 0 })</span>
              <button class="btn btn-xs btn-danger del-btn" data-id=${id}>
                <i class="fa fa-trash"></i>&nbsp;取消点赞
              </button>
            </a>
          </li>
          `
				})
        // 插入到指定位置
				$('.items-01').html(htmlTpl)

        // 渲染分页器
				renderPage(count)
			},
		})
	}

	// 点击取消点赞
	$('.widget .items-01').on('click', '.del-btn', function () {
		const id = $(this).data('id')
				$.ajax({
					url: '/user/userDataHandle',
					method: 'GET',
          headers: { token: localStorage.getItem('token') },
					data: {
						type: 2,
						article_id: id,
						action: 'del',
					},
					success: function (res) {
						if (res.errno !== 0) return layer.msg(res.data)
						layer.msg(res.data)

            // 重新调用渲染页面
						getZan()
					},
				})
	   })


	// 封装分页方法
	function renderPage(count) {
		//执行一个laypage实例
		laypage.render({
			elem: 'test1', //注意，这里的 page-box 是 ID，不用加 # 号
			count: count, //数据总数，从服务端得到
			curr: q.page, // 分页器当前高亮的页码
			limit: q.limit, // 每页显示的条数。laypage将会借助 count 和 limit 计算出分页数
			limits: [1, 5, 10, 20, 30, 40], // 每页条数的选择项。如果 layout 参数开启了 limit，则会出现每页条数的select选择框
			theme: '#ff5e52',
			/**
			 * layout自定义排版。可选值有：
			 * count（总条目输区域）、prev（上一页区域）、page（分页区域）、
			 * next（下一页区域）、limit（条目选项区域）、refresh（页面刷新区域。
			 * 注意：layui 2.3.0 新增） 、skip（快捷跳页区域）
			 */
			layout: ['count', 'limit', 'prev', 'page', 'next'],
			jump: function (obj, first) {
				//obj包含了当前分页的所有参数，比如：
				// 触发分页回调，修改查询条件
				q.page = obj.curr
				q.limit = obj.limit
				// initTable()
				//首次不执行
				if (!first) {
					//do something
					renderList()
				}
			},
		})
	}

  	// 底部友情链接部分
	$.ajax({
		method: 'GET',
		url: '/index/index',
		success: function (res) {
			//  console.log(res);
			const { data, errno } = res
			if (errno !== 0) return layer.msg('获取失败')
			const { allLink } = data
			const youLink = allLink
				.map((item, i) => {
					const { url, des } = item
					return `
     <a href=${url} title="${des}">${des}</a> <span>|</span>  `
				})
				.join('')
			$('.footer .link').append(youLink)
		},
	})
})
